<template>
    <div class="shopDraw page">
        <formHeader :title="'提现'" color></formHeader>
        <div class="content">
            <div class="msg">
                <div class="drawMsg" @click="turn('/order/withdraw?identify=1')">提现记录</div>
                <img src="./bag.png" alt="">
                <div class="allMoney">{{shopTotal}}</div>
                <div class="detail">(我的账户余额)</div>
            </div>
            <div class="tips">当前余额低于100元不可提现，提现申请提交时间为每月10-15日！</div>
            <div class="input">
                <div class="title">提现金额</div>
                <input type="text" placeholder="请输入提现金额" v-model="amount"
                       oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
            </div>

            <div class="btn" @click="deposit">提现</div>
            <div class="bank" v-if="flag">提现到{{data.bank}}({{data.number.substr(data.number.length-4)}}) <span
                    class="change"
                    @click="turn('/withdraw/bank')">更换</span>
            </div>
            <div class="bank" v-if="!flag">您还未选择银行卡,点击<span class="change" @click="turn('/withdraw/bank')">添加</span>
            </div>

        </div>
    </div>
</template>

<script>
    import formHeader from '@/components/form-header'
    import eventBus from "@/common/js/eventbus";
    import {getShopWithdraw} from '@/api/order'
    import {deposit} from '@/api/account'
    import {showError} from "../../toast";
    import {showCorrect} from "../../dialog";
    export default {
        name: "shopDraw",
        components: {formHeader},
        data() {
            return {
                data: {
                    accBranch: null,
                    accName: null,
                    bank: null,
                    number: null
                },
                flag: false,
                shopTotal: 0,
                amount: null
            }
        },
        methods: {
            turn(path) {
                this.$router.push({
                    path
                })
            },
            deposit(){
                if (!this.amount){
                    showError('请输入提现金额')
                    return
                }
                if (this.amount<100){
                    showError('提现金额需100元以上')
                    return
                }
                if (!this.data.number){
                    showError('您还未选择银行卡')
                    return
                }
                if (!this.data.accName){
                    showError('请添加开户人')
                    return
                }
                if (!this.data.bank){
                    showError('请添加开户银行')
                    return
                }
                if (!this.data.accBranch){
                    showError('请添加银行分行')
                    return
                }

                let data={
                    amount:this.amount,
                    accName:this.data.accName,
                    bank:this.data.bank,
                    accBranch:this.data.accBranch,
                    number:this.data.number,
                    identify:1
                }
                console.log(data)
                deposit(data).then(res=>{
                    if (res.code==10000){
                        showCorrect('申请成功')
                        this.$router.push({
                            path:'/my'
                        })
                    }
                })
            }

        },
        activated() {
            eventBus.$on('msg', data => {
                this.data = data
                this.flag = true
            })
            getShopWithdraw().then(res => {
                this.shopTotal = res.data.shopTotal
            })
        }
    }
</script>

<style scoped lang="stylus">
    .shopDraw
        background-color: #f5f5f5

        .content
            margin-top 47px

            .msg
                background-color: #fff
                padding 10px 15px 27px 15px
                display flex
                flex-direction column
                justify-content center
                align-items center

                .drawMsg
                    text-align right
                    color #676d6c
                    font-size 13px
                    line-height 18px
                    width 100%

                img
                    width: 75px
                    height: 79px

                .allMoney
                    margin-top 15px
                    line-height 44px
                    color #00d6c0
                    font-size 36px

                .detail
                    color #b6b9bb
                    font-size 15px
                    line-height 21px

            .tips
                font-size 13px
                line-height 18px
                padding 8px 15px
                color #b6b9bb

            .input
                display flex
                padding 0 15px
                background-color: #fff
                align-items center
                font-size 15px
                color #333737
                height 44px

                input
                    outline none
                    margin-left 25px
                    flex 1

            .btn
                width 345px
                background-color: #00d6c0
                font-size 17px
                color #fff
                line-height 44px
                height 44px
                border-radius 2px
                text-align center
                margin 0 auto
                margin-top 55px

            .bank
                margin-top 10px
                text-align center
                color #b6b9bb
                font-size 13px

                .change
                    color #00d6c0


</style>